<template>
    <section
        :style="{
            paddingTop: confDiy.paddingTop + 'px',
            paddingBottom: confDiy.paddingBottom + 'px',
            marginTop: confDiy.marginTop + 'px',
            marginBottom: confDiy.marginBottom + 'px',
            background: `linear-gradient(
                ${confDiy.bgEdg}deg,
                ${confDiy.bgColorOne},
                ${confDiy.bgColorTow},
                ${confDiy.bgColorThree})`
        }"
    >
        <div class="m-auto px-10">
            <div
                v-if="confDiy.title || confDiy.intro"
                class="flex flex-col gap-1.5"
                :style="{ marginBottom: confDiy.headerBottom + 'px' }"
            >
                <h3
                    v-if="confDiy.title"
                    class="text-center text-7xl font-bold"
                    :style="{ color: confDiy.titleColor }"
                >
                    {{ confDiy.title }}
                </h3>

                <p
                    v-if="confDiy.intro"
                    class="text-center"
                    :style="{ color: confDiy.introColor }"
                >
                    {{ confDiy.intro }}
                </p>
            </div>

            <div
                class="grid gap-6"
                :style="{
                    'grid-template-columns': `repeat(${confDiy.rows}, minmax(0, 1fr))`
                }"
            >
                <template v-for="(item, index) in dataDiy">
                    <div
                        v-if="item.isEnable"
                        :key="index"
                        class="card rounded-xl shadow-lighter"
                        :style="{ backgroundColor: item.bgColor }"
                    >
                        <div v-if="item.icon" class="w-14 h-14 mb-5">
                            <el-image
                                :src="appStore.toAbsoluteUrl(item.icon)"
                                class="w-full h-full rounded-lg"
                            />
                        </div>

                        <h4
                            class="font-bold text-2xl mb-2"
                            :style="{ color: item.nameColor }"
                        >
                            {{ item.name }}
                        </h4>

                        <p :style="{ color: item.descColor }">
                            {{ item.desc }}
                        </p>

                        <a
                            v-if="item.more"
                            class="mt-5"
                            :style="{ color: item.moreColor }"
                        >
                            {{ item.more }}
                        </a>
                    </div>
                </template>
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
import type { FeatureConfigType, FeatureDataType } from '../index.ts'
import useAppStore from '@/stores/modules/app'

const props = defineProps({
    diyData: {
        type: Object,
        default: () => ({
            config: {} as FeatureConfigType,
            data: [] as FeatureDataType[]
        })
    }
})

const appStore = useAppStore()

// 装修数据
const confDiy = ref({} as FeatureConfigType)
const dataDiy = ref([] as FeatureDataType[])

// 监听数据
watch(
    () => props.diyData,
    (val) => {
        confDiy.value = val.config
        dataDiy.value = val.data
    }, { immediate: true }
)
</script>

<style scoped lang="scss">
.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.5s;
    &:hover {
        transform: translateY(-10px);
    }
}
</style>
